<template>
	<view class="">
		<view class="panel-box">
			<view class="header-box" v-if="header">
				<view class="left" style="font-size: 35rpx;font-weight: bold;">
					<image :src="titleIcon" style="margin-right: 10rpx; width: 40rpx;height: 40rpx;" mode=""></image>
					<view class="">
						{{title}}
					</view>
				</view>
				<view @tap="more" class="right" style="font-size: 30rpx; color: #cccccc;">
					<view class="" v-if="rightTitle != 'true'">
						{{rightTitle}}
					</view>
					<view class="" v-if="rightTitleIcon != 'true'">
						{{rightTitleIcon}}
					</view>
				</view>
			</view>
			<view class="content-box">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			title:{
				type:String,
				default:'默认标题'
			},
			titleIcon:{
				type:String,
				default:''
			},
			rightTitle:{
				type:String,
				default:'更多'
			},
			rightTitleIcon:{
				type:String,
				default:''
			},
			header:{
				type:Boolean,
				default:true
			}
		},
		data(){
			return {
				
			}
		},
		methods:{
			more(){
				this.$emit('more')
			}
		}
	}
</script>

<style lang="scss" lang="scss">
	.panel-box{
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		color: #000;
		.header-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left,.right{
				display: flex;
				align-items: center;
			}
		}
	}
</style>
